<template>
  <i
    v-if="name.startsWith('el-')"
    :class="['test-icon', name]"
    :style="svgStyle"
  ></i>
  <svg v-else class="test-icon" aria-hidden="true" :style="svgStyle">
    <use :xlink:href="`#${name}`"></use>
  </svg>
</template>

<script>

export default {
  name: "svgIcon",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: [String, Number],
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
  computed: {
    svgStyle() {
      let style = {};
      if (this.size) {
        let size = String(this.size);
        if (size.indexOf("px") < 0) size += "px";
        style.width = size;
        style.height = size;
      }
      if (this.color) {
        style.color = this.color;
        style.fill = this.color;
      }
      return style;
    },
  },
};
</script>

<style lang="scss" scoped>
.test-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  overflow: hidden;
  vertical-align: sub;
  // padding-right: 6px;
}
</style>
